<template>
  <div class="indexbox">
    <el-container class="layout-container-demo" style="height:100% ;overflow-y: auto;">
      <el-menu default-active="2" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
        @close="handleClose">


        <div class="lefttop">
          <h1>
            MALL4J建站后台
          </h1>
        </div>


        <el-sub-menu>
          <template #title>
            <el-icon><icon-menu /></el-icon><span><router-link to="/index/shouye">首页</router-link></span>
          </template>
        </el-sub-menu>






        <el-sub-menu index="2">
          <template #title>
            <el-icon>
              <Stamp />
            </el-icon><span>产品管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="2-1"><router-link to="/index/product">产品管理</router-link></el-menu-item>
            <el-menu-item index="2-2"><router-link to="/index/classify">分类管理</router-link></el-menu-item>
            <el-menu-item index="2-3"><router-link to="/index/grouping">分组管理</router-link></el-menu-item>
            <el-menu-item index="2-4"><router-link to="/index/comment">评论管理</router-link></el-menu-item>
            <el-menu-item index="2-5"><router-link to="/index/Specifications">规格管理</router-link></el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>


        <el-sub-menu index="3">
          <template #title>
            <el-icon>
              <Shop />
            </el-icon><span>门店管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="3-1"><router-link to="/index/Notice">公告管理</router-link></el-menu-item>
            <el-menu-item index="3-2"><router-link to="/index/Self">自提点管理</router-link></el-menu-item>
            <el-menu-item index="3-3"><router-link to="/index/freight">运费模板</router-link></el-menu-item>
            <el-menu-item index="3-4"><router-link to="/index/swiper">轮播图管理</router-link></el-menu-item>
            <el-menu-item index="3-5"><router-link to="/index/Hotsearch">热搜管理</router-link></el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>


        <el-sub-menu index="4">
          <template #title>
            <el-icon>
              <Checked />
            </el-icon><span>会员管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="4-1"><router-link to="/index/vip">会员管理</router-link></el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>

        <el-sub-menu index="5">
          <template #title>
            <el-icon>
              <List />
            </el-icon><span>订单管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="5-1"><router-link to="/index/order">订单管理</router-link></el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>


        <el-sub-menu index="6">
          <template #title>
            <el-icon>
              <Tools />
            </el-icon><span>系统管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="6-1"><router-link to="/index/address">地址管理</router-link></el-menu-item>
            <el-menu-item index="6-2"><router-link to="/index/administrators">管理员列表</router-link></el-menu-item>
            <el-menu-item index="6-3"><router-link to="/index/role">角色管理</router-link></el-menu-item>
            <el-menu-item index="6-4"><router-link to="/index/menu">菜单管理</router-link></el-menu-item>
            <el-menu-item index="6-5"><router-link to="/index/timing">定时任务</router-link></el-menu-item>
            <el-menu-item index="6-6"><router-link to="/index/parameter">参数管理</router-link></el-menu-item>
            <el-menu-item index="6-7"><router-link to="/index/journal">系统日志</router-link></el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
      </el-menu>

      <el-container>
        <el-header style="text-align: right; font-size: 12px;background: white;height: 60px;">
          <el-icon>
            <Fold @click="hui" />
          </el-icon>
          <div class="toolbar">

            <el-dropdown>
              <span class="el-dropdown-link">
                {{ username1 }}
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="dialogVisible = true">修改密码</el-dropdown-item>
                  <el-dropdown-item @click="tuchu">退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>

        <!-- 修改密码 -->
        <el-dialog v-model="dialogVisible" title="修改密码" width="40%"  draggable>
          <div class="userbox">
            <p>账号&emsp; {{ username1 }}</p>
            <div class="usermenu">
              <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" 
              class="demo-ruleForm">
              <el-form-item label="原始密码" prop="pass">
                <el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
              </el-form-item>
              <el-form-item label="新密码" prop="pass">
                <el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
              </el-form-item>
              <el-form-item label="确认密码" prop="pass">
                <el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
                <el-button @click="resetForm(ruleFormRef)">取消</el-button>
              </el-form-item>
            </el-form>
            </div>
          </div>
          <!-- <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogVisible = false">取消</el-button>
              <el-button type="primary" @click="dialogVisible = false">
                确定
              </el-button>
            </span>
          </template> -->
        </el-dialog>

        <el-main>
          <div class="gouzi">

          </div>
          <el-scrollbar>
            <router-view></router-view>
          </el-scrollbar>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, reactive } from 'vue'
import { Menu as IconMenu, Message, Setting, Fold, Stamp, Shop, Checked, Tools, List, ArrowDown } from '@element-plus/icons-vue'
import { user } from '../../api/index'
import type { FormInstance } from 'element-plus'
const isCollapse = ref(false)
//修改密码
const dialogVisible = ref(false)

const ruleFormRef = ref<FormInstance>()
const checkAge = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('Please input the age'))
  }
  setTimeout(() => {
    if (!Number.isInteger(value)) {
      callback(new Error('Please input digits'))
    } else {
      if (value < 18) {
        callback(new Error('Age must be greater than 18'))
      } else {
        callback()
      }
    }
  }, 1000)
}

const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('Please input the password'))
  } else {
    if (ruleForm.checkPass !== '') {
      if (!ruleFormRef.value) return
      ruleFormRef.value.validateField('checkPass', () => null)
    }
    callback()
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('Please input the password again'))
  } else if (value !== ruleForm.pass) {
    callback(new Error("Two inputs don't match!"))
  } else {
    callback()
  }
}

const ruleForm = reactive({
  pass: '',
  checkPass: '',
  age: '',
})

const rules = reactive({
  pass: [{ validator: validatePass, trigger: 'blur' }],
  checkPass: [{ validator: validatePass2, trigger: 'blur' }],
  age: [{ validator: checkAge, trigger: 'blur' }],
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
//用户
const username1 = ref('')
onMounted(async () => {
  const use = await user({ t: new Date().getTime() })
  console.log(use, '22222222')
  username1.value = use.data.username
  console.log(username1)
})

//退出
const tuchu = () => {
  localStorage.clear()
  location.reload()
}

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const hui = () => {
  isCollapse.value = !isCollapse.value
}
</script>

<style>
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}

.layout-container-demo .el-menu {
  border-right: none;
}

.layout-container-demo .el-main {
  padding: 0;
}

.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}


.lefttop {
  height: 60px;
  text-align: center;
  background: #02a1e9;
  line-height: 60px;
}

h1 {
  color: white;
}

.el-menu {
  background: #263238;
  color: #8a979e;
}

/* .el-sub-menu {
  background: #263238;
  color: #8a979e;
} */

.el-sub-menu .el-sub-menu__title {
  color: #8a979e;
}

a {
  color: #8a979e;
  text-decoration: none;
}


.gouzi {
  width: 100%;
  height: 40px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-header {
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
}

.el-menu {
  overflow: hidden;
}

.lefttop {
  overflow: hidden;
}

.el-menu {
  overflow-y: auto;
}

::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

/* 修改密码 */
.userbox{
  display: flex;
  flex-direction: column;
    align-content: center;
    justify-content: space-evenly;
}
.demo-ruleForm{
  margin-top: 10px;
}
</style>
